<template>
  <div id="mapcontainB">
    <div id="MAps" style="width:100%;height:100%"></div>
    <detailB ref="childdetail" @changeStreetLine="changeStreetLine" @changMapCenter="changMapCenter" />
    <div class="color fc">
      <img src="@/assets/img/businessdetail/img09.png" alt="" />
      <div class="fbd box">
        <span>正常</span>
        <span>异常</span>
        <span>超异常</span>
        <span>小额工程</span>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { post, get } from "@/utils/axios";
import { houseDetail } from "@/assets/json/houseDetail";
import { streetarea } from "@/assets/json/streetarea";

import detailB from "@/components/businessdetail/detail";
import mapIconOffL from "@/assets/img/businessdetail/img03.png";
import mapIconOffH from "@/assets/img/businessdetail/img06.png";
import mapIconOffY from "@/assets/img/businessdetail/img02.png";
import five from "@/assets/img/five.png";

export default {
  name: "mapcontainB",
  components: { detailB },
  data() {
    return {
      timer: null,
      MAps: null,
      polygons: [],
      cluster: null, //点聚合
      markers: [] //点聚合marks
    };
  },
  created() {},
  mounted() {
    let tableData;
    if (this.$route.query.name) {
      tableData = houseDetail.filter(e => e.street == this.$route.query.name);
      tableData[30].zoom = 15;
    } else {
      tableData = houseDetail;
      tableData[30].zoom = 15;
    }
    this.initMaps(tableData[30]);
    this.supplyEvent(14);
  },
  destroyed() {
    // this.timer = null;
  },
  methods: {
    //触发对应的街道边线
    changeStreetLine(obj) {
      let arr = streetarea[obj.name];
      this.mapline(arr, obj.name);
    },
    //触发对应的街道里面的社区
    changMapCenter(record) {
      this.MAps.setZoomAndCenter(record.zoom, [record.lat, record.lng]);
    },
    initMaps(record) {
      const zoom = record.zoom || 18;
      // 配置地图的基本显示
      this.MAps = new AMap.Map("MAps", {
        resizeEnable: true, //是否监控地图容器尺寸变化
        zoom: zoom, //初始化地图层级
        center: [record.lat, record.lng], //初始化地图中心点
        mapStyle: "amap://styles/darkblue"
        // zoomEnable: true,
        // dragEnable: true
      });

      let map = this.MAps;

      //鼠标点击marker弹出自定义的信息窗体
      AMap.event.addListener(this.MAps, "click", function() {
        map.clearInfoWindow();
      });
    },
    supplyEvent(zoom) {
      let map = this.MAps;
      map.clearMap();
      //列表
      let markerFive = new AMap.Marker({
        map: map,
        position: [120.141503, 30.319126],
        // icon: mapIconOff, //图标注意顺序,在经纬度后边
        icon: new AMap.Icon({
          size: new AMap.Size(50, 50),
          image: five,
          imageSize: new AMap.Size(50, 50)
        })
      });
      markerFive.setLabel({
        offset: new AMap.Pixel(0, 28), //设置文本标注偏移量
        content:
          '<span style="font-weight:700;color:#FFDE00;">拱墅区政府</span>', //设置文本标注内容
        direction: "center" //设置文本标注方位
      });
      let data = houseDetail;
      //点聚合
      data.forEach((item, index) => {
        var light;
        var className;
        if (item.status == "0") {
          light = mapIconOffH;
          className = "mapIconOffH";
        } else if (item.status == "1") {
          light = mapIconOffY;
          className = "mapIconOffY";
        } else {
          light = mapIconOffL;
          className = "mapIconOffL";
        }
        let marker = new AMap.Marker({
          map: map,
          position: [item.lat, item.lng],
          // icon: mapIconOff, //图标注意顺序,在经纬度后边
          icon: new AMap.Icon({
            size: new AMap.Size(42, 60),
            image: light,
            imageSize: new AMap.Size(42, 60)
          })
          // offset: new AMap.Pixel(-15, -15)
        });
        // marker.setTitle(item.name);
        // 设置label标签
        // label默认蓝框白底左上角显示，样式className为：amap-marker-label
        marker.setLabel({
          offset: new AMap.Pixel(48, -30), //设置文本标注偏移量
          content: `<div class="mapLabel ${className}">${item.name}</div>`, //设置文本标注内容
          direction: "center" //设置文本标注方位
        });
        // this.markers.push(marker);
        //鼠标点击marker弹出自定义的信息窗体
        AMap.event.addListener(marker, "mouseover", e => {
          let content = `
            <div class="building_map_div" style="text-align: left">
              <div>
                <i class="iconfont icon-gongcheng-2 BL"></i>
                <span class="BL">项目名称</span>
              </div>
              <div>
              "阳光老人家"(康桥街道康远)标识设计制作安装项目
              </div>
               <div>
                <i class="iconfont icon-gongsi BL"></i>
                <span class="BL">项目名称</span>
              </div>
              <div>
              杭州尚元有限公司
              </div>
            </div>"
          `;

          let infoWindow = new AMap.InfoWindow({
            isCustom: true, //使用自定义窗体
            content: content,
            offset: new AMap.Pixel(6, -25)
          });
          infoWindow.open(map, marker.getPosition());

          // marker.setIcon(mapIconOff);

          // e.target.setIcon(siteOff); //图标注意顺序,在经纬度后边,放最后

          // const newIcon = new AMap.Icon({
          //   size: new AMap.Size(52, 26), // 图标尺寸
          //   image: mapIconOff, // Icon的图像
          //   imageSize: mapIconOff.size // 根据所设置的大小拉伸或压缩图片
          // });
          // marker.setIcon(newIcon);
        });
        AMap.event.addListener(marker, "click", e => {
          // 设置缩放级别和中心点
          map.setZoomAndCenter(18, [item.lat, item.lng]);

          // map.setFitView(marker);
          //触发子组件中事件
          this.$refs.childdetail.fatherClick(item.street, 18);
          // marker.setIcon(mapIconOff);
          // e.target.setIcon(siteOff); //图标注意顺序,在经纬度后边,放最后
        });
      });

      //无参数时，自动自适应所有覆盖物

      if (!zoom) {
        map.setFitView();
      }
    },
    mapline(lineArr, name) {
      //清除地图上所有覆盖物
      if (this.polygons.length > 0) {
        console.log(this.polygons);
        for (var i = 0, l = this.polygons.length; i < l; i++) {
          this.polygons[i].setMap(null);
        }
      }
      //  map.setCenter(obj[obj.options.selectedIndex].center)
      // 创建纯文本标记
      let position = {
        上塘街道: ["120.15617072023774", "30.31289737993914"],
        祥符街道: ["120.098969", "30.325291"],
        半山街道: ["120.181007", "30.34976"],
        康桥街道: ["120.149109", "30.364849"],
        湖墅街道: ["120.145203", "30.29335"],
        小河街道: ["120.132179", "30.30575"],
        拱宸桥街道: ["120.144768", "30.321371"],
        和睦街道: ["120.12433172883607", "30.30769471914404"],
        米市巷街道: ["120.150993", "30.283834"],
        大关街道: ["120.156433", "30.30534"]
      };
      // 设置文本标记锚点
      var text = new AMap.Text({
        text: name,
        anchor: "center",
        // draggable: true,
        // cursor: "pointer",
        angle: 10,
        style: {
          "border-width": 0,
          "font-size": ".12rem",
          "background-color": "transparent",
          color: "#ddd"
        },
        position: position[name]
      });
      text.setMap(this.MAps);
      this.MAps.setZoomAndCenter(14, lineArr[0]);
      var polygon = new AMap.Polygon({
        path: lineArr, //设置多边形边界路径
        strokeColor: "#FF33FF", //线颜色
        strokeOpacity: 0.2, //线透明度
        strokeWeight: 3, //线宽
        fillColor: "#1791fc", //填充色
        fillOpacity: 0.2 //填充透明度
      });

      // polygon.setMap(null);
      polygon.setMap(this.MAps);
      this.polygons.push(polygon);
      // console.log(polygon, 9999);
      var overlayGroup = new AMap.OverlayGroup(this.polygons);

      this.MAps.setFitView();
    }
  }
};
// 将当前经纬度展示在 infowindow 的 input 中

/**
 * 返回当前年月日的前一天
 * @returns {string}
 */
function getDate(params) {
  var date = new Date();
  var year = date.getFullYear();
  var month = date.getMonth() + 1;
  var day = date.getDate() + params;
  if (month < 10) {
    month = "0" + month;
  }
  if (day < 10) {
    day = "0" + day;
  }
  let nowDate = year + month + day;
  return nowDate;
}
</script>

<style lang="scss">
#mapcontainB {
  text-align: center;
  width: 100%;
  height: 100%;
  .color {
    background-color: rgba(0, 0, 0, 0.5);
    font-size: 0.12rem;
    position: fixed;
    left: 0.45rem;
    bottom: 0.8rem;
    z-index: 101;
    img {
      width: 0.32rem;
      height: 1.3rem;
    }
    .box {
      margin-left: 0.1rem;
      align-items: flex-start;
      line-height: 0.33rem;
    }
  }
  #infowindow {
    width: 3.6rem;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 101;
  }

  .amap-icon img {
    width: 1rem;
  }
  .operate_div {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8vw;
    height: 35vh;
    font-weight: 600;
    z-index: 100;
  }

  .amap-marker-label {
    cursor: pointer;
    color: #fff;
    font-size: 0.12rem;
    background: none;
    border: none;
  }

  .building_map_div {
    border-radius: 0.2vw;
    padding: 0.5vw;
    // background: rgba(0, 81, 255, 0.7);
    // box-shadow: 0px 10px 30px -9px #00027a;
    // border: solid 2px #0480f8;
    // border-image-slice: 1;
    background: url(../../assets/img/mid/img09.png) center no-repeat;
    background-size: 100% 100%;
    font-size: 0.14rem;
    font-weight: bold;
    line-height: 3vh;
    word-break: keep-all;
  }

  .building_map_header_title {
    color: #3afc06;
    padding-left: 0.3vw;
    margin-left: -0.3vw;
    // background: linear-gradient(
    //   to right,
    //   rgba(1, 78, 255, 1),
    //   rgba(0, 0, 0, 0.1)
    // ); /* 标准的语法 */
  }

  .icon-dingwei {
    font-size: 0.16rem;
  }
  .building_map_value {
    color: #00dafb;
    color: 0.2rem;
  }

  .amap-logo {
    display: none !important;
  }
}
</style>
